<!DOCTYPE HTML>
<html manifest="wish-list.manifest">
<head>
    <title>WishList module</title>
    <script type="text/javascript" src="jquery-1.4.2.js" >//</script>
    <script type="text/javascript" src="jquery.tmpl.js" >//</script>
    <script type="text/javascript" src="knockout-1.2.1.js" >//</script>

    <style type="text/css">
        header, footer {
            background-color: #339999;
        }

        .content {
            text-align: center;
        }

        .wish-list {
            display: inline-block;
            text-align: left;
        }

        .wish-list ul {
            padding: 0;
            margin: 0;
        }

        .wish-list ul li {
            list-style: none;
        }

        .status-init .item-action,
        .status-init .item-status {visibility: hidden;}

    </style>
</head>
<body>
    <header>
        Header here
    </header>
    <div class="content">
        <div class="wish-list">
            <span class="wish-list-name" data-bind="text: name" ></span>
            <ul data-bind='template: {name: "wish-list-item", foreach: items}'></ul>
            <a href="javascript:void(0)" onclick="cleanList()">Clean Items</a>
        </div>
    </div>
    <footer>
        Footer here
    </footer>

    <script type='text/html' id="wish-list-item">
        <li data-bind="attr: { class: 'status-' + status() }" >
            <input class="item-status" type="checkbox" name="status" value="done" data-bind="checked: isDone" />
            <input class="item-text" type="text" name="text" data-bind="value: text, valueUpdate: 'afterkeydown', disable: isDone, event: {keyup: itemKeypress}" tabindex="10" />
            <a class="item-action" href="#" data-bind="click: function() { wishList.removeItem($data) }">Delete</a>
        </li>
    </script>

    <script type="text/javascript" id="">
        function getStoredWishList() {
            try {
                if (!localStorage) {
                    console.log("Your browser too old to use this gorgeous application. (localStorage not found) ");
                    return null;
                }
                return $.parseJSON(localStorage.getItem("wishList"));
            } catch(e) {
                console.log(e)
            }

            return null;
        }

        var storedWishList = getStoredWishList();
        if (storedWishList) {
            var wishList = createWishList(storedWishList.name, storedWishList.items);
        } else {
            var wishList = createWishList();
        }


        ko.applyBindings(wishList);

        function createWishList(name, items) {

            var ii = $(items || [{status:"init", text:""}]).map(function (i, item) {
                return createItem(item.status, item.text);
            });

            return {
                name: name || "Default",
                items: ko.observableArray(ii),

                removeItem: function (item) {
                    this.items.remove(item);
                },

                toJSON: function () {
                    var items = [];
                    var items2 = this.items();
                    for (var i = 0; i < items2.length; i++) {
                        items.push(items2[i].toJSON());
                    }

                    return "{\"name\": \"" + this.name + "\", \"items\": [" + items.join(",") + "]}";
                }
            };
        }

        function createItem(status, text) {
            var item = {};
            item.status = ko.observable(status || "init");
            item.isDone = ko.observable(status == "done");
            item.isDone.subscribe(function (value) {
                item.status(value ? "done" : "ready");
            });

            item.text = ko.observable(text || "");
            item.itemKeypress = function (event) {
                var text = item.text();
                if (item.status() == "init" && text && text.length > 0) {
                    item.status("ready");
                    wishList.items.push(createItem());
                }

                if (event.which == 13 ) {
                    console.log("Should go to next item.");
                }

                return true;
            };
            item.toJSON = function () {
                return "{\"status\": \"" + this.status() + "\", \"text\": \"" + this.text() + "\"}";
            };

            return item;
        }

        function cleanList() {
            wishList.items.remove(function (item) {
                return item.isDone();
            })
        }

        setInterval(function () {
            if (localStorage) {
                localStorage.setItem("wishList", wishList.toJSON());
//                console.log("data was saved to local storage.");
            } else {
                console.log("Local storage unavalable, your date can't be saved.");
            }
        }, 1000);
    </script>

</body>
</html>